import React,{Component} from 'react';
import  {HotData}  from './hot/HotData';
import  {HotThem}  from './hot/HotThem';
import  {HotApp}  from './hot/HotApp';
import  {HotSkill}  from './hot/HotSkill';
import '../../../style/component/Maintab.less';
import { NavBar, Icon,TabBar } from 'antd-mobile';
import {
    BrowserRouter as Router,
    Route,
    Redirect,
} from 'react-router-dom'
class Maintab extends Component {
    constructor(props){
        super(props)
        this.state = {
            selectedTab:'Hotdata',
            tablist:[]
        }
    }
    componentDidMount() {
        this.setState({tablist : [
            {'title':'热门数据','id':'Hotdata','icon':'icontongjitu111'}, 
            {'title':'热门主题','id':'hotthem','icon':'iconmulushuju'}, 
            {'title':'热门应用','id':'Hotapp','icon':'iconfuwu'}, 
            {'title':'热门技术','id':'Hotskill','icon':'iconjishu'}]
        })
    }

    handleTabSelected(value){   
        this.setState({'selectedTab': value});
        console.log("shenmm",this.props);
    }
    render(){
      
        return(
            <div className="homeTab">
                    <span className="title_header"> 浙有数</span>
                    <TabBar
                        unselectedTintColor="#FFFFFF"
                        tintColor="#FFFFFF"
                        barTintColor="#26a2ff"
                        tabBarPosition="top"
                    >
                        <TabBar.Item
                            title="热门数据"
                            key="Hotdata"   
                            selected={this.state.selectedTab === 'Hotdata'}
                            onPress={this.handleTabSelected.bind(this,'Hotdata')}
                            icon={<i className='iconfont icontongjitu111 tabIconfont'></i>}
                            selectedIcon={<i className='iconfont icontongjitu111 tabIconfont'></i>}              
                        >
                           <HotData></HotData> 
                        </TabBar.Item>
                        <TabBar.Item
                            title="热门主题"
                            key="Hotthem" 
                            selected={this.state.selectedTab === 'Hotthem'}
                            onPress={this.handleTabSelected.bind(this,'Hotthem')}
                            icon={<i className='iconfont iconmulushuju tabIconfont'></i>}
                            selectedIcon={<i className='iconfont iconmulushuju tabIconfont'></i>}
                        >
                            <HotThem></HotThem> 
                        </TabBar.Item>
                        <TabBar.Item
                            title="热门应用"
                            key="hotapp"  
                            selected={this.state.selectedTab === 'Hotapp'}
                            onPress={this.handleTabSelected.bind(this,'Hotapp')}
                            icon={<i className='iconfont iconfuwu tabIconfont'></i>}
                            selectedIcon={<i className='iconfont iconfuwu tabIconfont'></i>}            
                        >
                            <HotApp></HotApp> 
                        </TabBar.Item>
                        <TabBar.Item
                            title="热门技术"
                            key="Hotskill"
                            selected={this.state.selectedTab === 'Hotskill'}
                            onPress={this.handleTabSelected.bind(this,'Hotskill')}
                            icon={<i className='iconfont iconjishu tabIconfont'></i>}   
                            selectedIcon={<i className='iconfont iconjishu tabIconfont'></i>}          
                        >
                            <HotSkill ></HotSkill>
                        </TabBar.Item>
                    </TabBar>           
            </div>
        )
    }
}
export {Maintab};